import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaTab,
    WeaTop,
    WeaDialog,
    WeaNewScroll,
    WeaRightMenu,
} from "ecCom";
import {WeaTableNew} from "comsMobx";
import {Button, Spin} from "antd";
import NoRightComponent from '../NoRightComponent.js';
import InitConfigListComponent from './InitConfigListComponent';
import BaseSystemSettingComponent from './BaseSystemSettingComponent';
import * as IconConstant from '../../constant/IconConstant.js';
import LanguageConstant from '../../constant/LanguageConstant';
import * as Constant from '../../constant/Constant';
import '../../style/systemSettingPage.less';

const {getLabel} = WeaLocaleProvider;
const {WeaTable} = WeaTableNew;

@inject("systemSettingStore")
@observer
class SystemSettingPage extends Component {

    render() {
        const {systemSettingStore} = this.props;
        const {authorized, loading, selectedTabKey, onTabChange} = systemSettingStore;
        if (!authorized) {
            return (<NoRightComponent/>);
        }
        const tabDatas = this.getTabDatas();
        return (
            <div className="system-setting-page">
                <WeaRightMenu datas={this.getDropMenuDatas()}>
                    <WeaTop
                        title={getLabel(LanguageConstant.APPLICATION_SETTING, "应用设置")}
                        icon={<i className={IconConstant.WEATOP_ICON}/>}
                        iconBgcolor={IconConstant.WEATOP_ICON_BG_COLOR}
                        buttons={this.getWeaTop()}
                        loading={loading}
                        showDropIcon={true}
                        dropMenuDatas={this.getDropMenuDatas()}
                    >
                        <Spin spinning={loading}>
                            <WeaTab
                                datas={tabDatas}
                                keyParam="viewcondition"
                                selectedKey={selectedTabKey}
                                onChange={tabKey => {
                                    onTabChange(tabKey);
                                }}
                            />
                            <div className="system-setting-page-tabpage">
                                <WeaNewScroll height={'100%'}>
                                    {this.getContent()}
                                </WeaNewScroll>
                            </div>
                        </Spin>
                    </WeaTop>
                </WeaRightMenu>
            </div>
        );
    }

    getDropMenuDatas = () => {
        const {systemSettingStore} = this.props;
        const {loading, affirmInitAll, selectedTabKey, saveBaseSystemSettingForm} = systemSettingStore;
        const dropMenuDatas = [];
        if (selectedTabKey == Constant.SYSTEM_SETTING_TAB_INIT_CONFIG_LIST) {
            dropMenuDatas.push({
                key: '1',
                disabled: loading,
                icon: <i className='icon-coms-Add-to'/>,
                content: getLabel(LanguageConstant.ONE_KEY_INIT, "一键初始化"),
                onClick: key => affirmInitAll(),
            });
        } else if (selectedTabKey == Constant.SYSTEM_SETTING_TAB_BASE_SETTING) {
            dropMenuDatas.push({
                key: '1',
                disabled: loading,
                icon: <i className='icon-coms-Add-to'/>,
                content: getLabel(LanguageConstant.SAVE, "保存"),
                onClick: key => saveBaseSystemSettingForm(),
            });
        }
        return dropMenuDatas;
    }

    getWeaTop = () => {
        const {systemSettingStore} = this.props;
        const {loading, affirmInitAll, selectedTabKey, saveBaseSystemSettingForm} = systemSettingStore;
        const btns = []
        if (selectedTabKey == Constant.SYSTEM_SETTING_TAB_INIT_CONFIG_LIST) {
            btns.push(<Button type="primary"
                              onClick={() => affirmInitAll()}>{getLabel(LanguageConstant.ONE_KEY_INIT, "一键初始化")}</Button>);
        } else if (selectedTabKey == Constant.SYSTEM_SETTING_TAB_BASE_SETTING) {
            btns.push(<Button type="primary"
                              onClick={() => saveBaseSystemSettingForm()}>{getLabel(LanguageConstant.SAVE, "保存")}</Button>);
        }
        return btns;
    }

    /**
     * 获取TAB页内容
     *
     * @returns {*}
     */
    getContent() {
        const {systemSettingStore} = this.props;
        const {selectedTabKey} = systemSettingStore;
        if (selectedTabKey == Constant.SYSTEM_SETTING_TAB_INIT_CONFIG_LIST) {
            return <InitConfigListComponent/>
        } else if (selectedTabKey == Constant.SYSTEM_SETTING_TAB_BASE_SETTING) {
            return <BaseSystemSettingComponent/>
        }
        return (<div className="workflow-setting-nonetabpage"></div>)
    }

    /**
     * 获取Tab页签
     *
     * @returns {{title: *, viewcondition: string}[]}
     */
    getTabDatas() {
        const tabDatas = [
            {
                title: getLabel(LanguageConstant.SYSTEM_SETTING_TAB_BASE_SETTING, '基础设置'),
                viewcondition: Constant.SYSTEM_SETTING_TAB_BASE_SETTING
            }, {
                title: getLabel(LanguageConstant.SYSTEM_SETTING_TAB_INIT_CONFIG_LIST, '初始化设置'),
                viewcondition: Constant.SYSTEM_SETTING_TAB_INIT_CONFIG_LIST
            }
        ];
        return tabDatas;

    }

}

export default SystemSettingPage;